<template>
    <page-meta :page-style="'overflow:' + (pageshow ? 'hidden' : 'visible')"></page-meta>
    <view class="page">
        <view class="content">
            <uv-list :customStyle="{ backgroundColor: 'initial' }">
                <uv-list-item v-for="v in list" :key="v.id" :title="Number(v.formuserId) < 1 ? $t('系统') : v.name"
                    :note="v.context" :right-text="dayjs(v.create_time).format('MM-DD HH:mm')"
                    :customStyle="{ marginBottom: '12rpx' }" :clickable="true" :show-badge="!v.state"
                    :badge="{ isDot: true, }" @click="click(v)">
                </uv-list-item>
            </uv-list>
        </view>
        <uv-back-top :customStyle="backtopStyle" :iconStyle="backtopiconStyle" :scroll-top="5000"></uv-back-top>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { backtopStyle, backtopiconStyle } from '@/util/style';
import api from '@/api';
import type { Ipagedata, Iuser } from '@/interface';
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app';
import { inject } from 'vue';
import type { Ref } from 'vue';
import dayjs from 'dayjs';
const pageshow = ref(false)

const user = inject<Ref<Iuser>>('user')


const isRefresh = ref(false)
const finished = ref(false)
const list = ref<Eps.NoticeEntity[]>([])
let page = ref(0)
let size = ref(20)



const formData = ref({
})


async function _load(page: number): Promise<Ipagedata<Eps.NoticeEntity>> {
    if (!user?.value.tenant_user_id) {
        return {
            pagination: { size: 0, page: 0, total: 0 },
            list: []
        }
    }
    return api('/wechat/notice/page', {
        page,
        size: size.value,
        order: 'state,create_time',
        sort: 'asc,desc',
        touserId: user?.value.tenant_user_id,
        ...formData.value,

    })
}


async function refresh() {
    page.value = 1
    const res = await _load(1)
    list.value = res.list
    isRefresh.value = false
    if (res.list.length < size.value) {
        finished.value = true
    } else {
        finished.value = false
    }
}

onShow(() => {
    refresh()
})


onLoad(() => {
    refresh()
})

onReachBottom(() => {
    console.log('onReachBottom')
    load()
})

onPullDownRefresh(() => {
    refresh().then(e => {
        uni.stopPullDownRefresh()
    })
})

async function load() {
    if (finished.value === false) {
        page.value = page.value + 1
        const res = await _load(page.value)
        if (res.list.length) {
            res.list.forEach((element: any) => {
                list.value.push(element)
            });
            if (res.list.length < size.value) {
                finished.value = true
            }
        } else {
            finished.value = true
        }
    }
}


async function click(v: Eps.NoticeEntity) {
    api('/wechat/notice/setstate', { id: v.id })
    if (v.url) {
        try {
            uni.navigateTo({
                url: v.url,
                success() {

                },
                fail(result) {
                    refresh()
                },
            })
        } catch {

        }

    }
}

</script>

<style scoped lang="scss">
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    background-color: $uni-bg-def1;
}
</style>